<template>
  <div class="container">
    <div class="header">
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="content">
      <ul>
        <li v-for="(item,index) in initData" :key="index" @click="toChooseSpe(item.id)">
          <div class="card"> 
            <img :src="item.img_src" alt="">
            <p>{{item.material_name}}</p>
            </div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "search",
  data() {
    return {
      value: "",
      initData:[],
    };
  },
  mounted() {},
  methods: {
    async onSearch() {
       let params = {
        goods_name:this.value
      };
      const res = await this.$axios.post(this.$api.hlLikeIndex, params);
      if (res.code == 1) {
       this.initData=res.data;
      } else {
        this.$toast(res.msg);
      }
    },
    onCancel() {
      this.$router.back();
    },
     toChooseSpe(id) {
      this.$router.push({ path: "/chooseSpe", query: {
        id:id
      } });
    },
  }
};
</script>
<style scoped>
.container {
  padding-top: 0.46rem;
  font-size: 0.16rem;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.content {
  width:100%;
}
.content ul {
  width:100%;
  display:flex;
  align-items: center;
  flex-flow: wrap;
}
.content ul li {
  width:50%;
  padding:.08rem;
  
}
.content ul li .card{
background:#fff;
border-radius: .05rem;
font-size:.12rem;
}
.content ul li .card img {
  width:100%;
}
.content ul li .card p {
  padding:.1rem;
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>


